<script setup>
import { ref, onMounted } from 'vue'
import { selectSelf } from '@/api/attendance'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const tableData = ref([])

// 状态文本和颜色映射
const statusTextMap = {
  0: '正常出勤',
  1: '迟到',
  2: '早退',
  3: '迟到早退',
  4: '缺卡',
  5: '旷工'
}

const statusColorMap = {
  0: '#67C23A', // 绿色
  1: '#E6A23C', // 黄色
  2: '#E6A23C', // 黄色
  3: '#E6A23C', // 黄色
  4: '#909399', // 灰色
  5: '#F56C6C'  // 红色
}

const getStatusText = (status) => {
  return statusTextMap[status] || '未知状态'
}

const getStatusColor = (status) => {
  return statusColorMap[status] || '#303133' // 默认黑色
}

// 获取考勤数据
const fetchAttendanceData = async () => {
  try {
    const res = await selectSelf({
      userid: userStore.user.id
    })
    if (res && res.data) {
      tableData.value = res.data.data || []
    } else {
      tableData.value = []
    }
  } catch (error) {
    console.error('获取考勤数据失败:', error)
    tableData.value = []
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchAttendanceData()
})
</script>

<template>
 <el-card class="info-card">
    <el-button 
      type="primary" 
      class="info-button"
    >
      我的考勤信息
    </el-button>
  </el-card>

  <el-card class="table-card" style="margin-top: 20px;">
    <el-table
      :data="tableData"
      style="width: 100%"
      height="600"
    >
      <el-table-column prop="id" label="序号" width="120" />
      <el-table-column prop="userid" label="工号" width="120" />
      <el-table-column prop="earlyTime" label="早卡时间" align="center" />
      <el-table-column prop="lateTime" label="晚卡时间" align="center" />
      <el-table-column prop="dayTime" label="打卡日期" align="center" />
      <el-table-column prop="status" label="打卡状态" width="100">
        <template #default="scope">
          <span :style="{ color: getStatusColor(scope.row.status) }">
            {{ getStatusText(scope.row.status) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="times" label="打卡次数" align="center" />
      <el-table-column prop="salaryDeduction" label="罚款金额" align="center" />
    </el-table>
  </el-card>
</template>

<style scoped>
.info-card {
    height: 70px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.info-button {
  width: 200px;
  font-size: 16px;
  /* padding: 12px 20px; */
  border-radius: 8px;
  text-align: center;
  background: linear-gradient(to right, #4a6bff, #7986cb);
  border: none;
  transition: all 0.3s;
}

.info-button:hover {
  background: linear-gradient(to right, #7986cb, #4a6bff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.info-button:active {
  transform: translateY(0);
}

.table-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
}
</style>